<template>
  <div>
    <div v-if="slideType=='day'">
      <day-slider v-bind="$props"  v-model="val"></day-slider>
    </div>
    <div v-else-if="slideType=='month'">
      <month-slider v-bind="$props"  v-model="val"/>
    </div>
    <div v-else-if="slideType=='year'">
      <year-slider v-bind="$props" v-model="val"/>
    </div>


  </div>

</template>

<script>
    import moment from 'moment'

    import MonthSlider from "./month-slider";
    import YearSlider from "./year-slider";
    import DaySlider from "./day-slider";
    export default {
      name: "timeLineSlider",
      components: {DaySlider, YearSlider, MonthSlider},
      computed:{
        slideType:function () {
          let startMoment = moment(new Date(this.startDate));
          let endMoment= moment(new Date(this.endDate));
          let diffDays =  endMoment.diff(startMoment,'days')
          let diffYear = endMoment.diff(startMoment,'years')
          let result = '';
          if(diffDays<=7){
            result = 'day'
          }else if(diffDays>7&&diffYear<1){
            result = 'month'
          }else{
            result = 'year'
          }
          return result;
        },
        val:{
          get(){
            return this.value
          },
          set(val){
            this.$emit('input',val)
          }
        }
      },
      props:{

          value:{
            type:Number,
            required:false
          },
          startDate:{
            type:String,
            required:false
          },
          endDate:{
            type:String,
            required:false
          },
          width:{
            type:String,
            default:'100%',
            required:false
          },
          tooltip:{
            type:String,
            default:'always%',
            required:false
          },
          piecewiseStyle:{
            type:Object,
            required:false,
            default:{
              "backgroundColor": "#ccc",
              "visibility": "visible",
              "width": "12px",
              "height": "12px"
            }
          },
         piecewiseActiveStyle:{
            type:Object,
            required:false,
            default:{
              "backgroundColor": "#3498db"
            }
          },
        labelActiveStyle:{
            type:Object,
            required:false,
            default:{
              "color": "#3498db"
            }
          },

        }
    }
</script>

<style scoped lang="scss">
  @import "./index.scss";
</style>
